<template>
  <view class="jiri-detail-wrapper">
    <image
        class="my-bg"
        mode="scaleToFill"
        src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
    />

    <view class="top">
      <view
          v-for="ls in goodDateTimeRange "
          :key="ls.id"
          :class="future==ls.id?'top-item top-item-actived':'top-item'"
          @click="handerClick(ls)"
      >{{ ls.name }}
      </view>
    </view>
    <view class="bottom">
      <view class="title">{{ dataInfo.baseInfo && dataInfo.baseInfo.summarize }}</view>
      <view class="list">
        <view v-for="ls in dataInfo.detailInfo" :key="ls.yinli" class="item">
          <view class="left">
            <view class>{{ ls.yangli }}</view>
            <view class>{{ ls.xingqi }}</view>
          </view>
          <view class="right">
            <view class>{{ ls.yinli }}</view>
            <view class="top2">
              <text class="text">{{ ls.ganzhi.yeargan }}{{ ls.ganzhi.yearzhi }}年</text>
              <text class="text">{{ ls.ganzhi.monthgan }}{{ ls.ganzhi.monthzhi }}月</text>
              <text class="text">{{ ls.ganzhi.daygan }}{{ ls.ganzhi.dayzhi }}日</text>
            </view>
            <view class></view>
            <view class>星宿：{{ ls.xingxiu }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {yfgzeshiApi} from "@/apis/qiuqian";

export default {
  data() {
    return {
      future: 3,
      goodDateTimeRange: [
        {
          id: 0,
          name: "未来7天"
        },
        {
          id: 1,
          name: "未来半个月"
        },
        {
          id: 2,
          name: "未来1个月"
        },
        {
          id: 3,
          name: "未来3个月"
        }
      ],

      incident: 0,
      dataInfo: {}
    };
  },
  onLoad(opt) {
    this.incident = opt.incident;
    this.initInfo();
  },
  methods: {
    async initInfo() {
      let {code, data} = await yfgzeshiApi({
        future: this.future,
        incident: this.incident
      });
      if (code == 1) {
        this.dataInfo = data;
        console.log(this.dataInfo);
      }
    },
    handerClick(ls) {
      this.future = ls.id;
      this.initInfo();
    }
  }
};
</script>

<style lang="scss">
.jiri-detail-wrapper {
  flex-grow: 1;
  padding: 24px 12px;

  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  font-size: 12px;
  position: relative;

  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    // opacity: 0.5;
  }

  .top {
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 10;

    .top-item {
      flex: 1;
      border: 1px solid #c09351;
      padding: 8px 8px;
      border-radius: 4px;
      color: #c09351;
      margin-right: 8px;
      text-align: center;

      &.top-item-actived {
        background: #c09351;
        color: #fff;
      }
    }
  }

  .bottom {
    .title {
      padding: 8px;
      font-size: 13px;
    }

    .list {
      .item {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 8px;

        .left {
          flex: 0 0 100px;
        }

        .right {
          flex-grow: 1;

          .top2 {
            display: flex;

            .text {
              margin-right: 4rpx;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
